<template>
  <router-view v-if="hideTab"></router-view>
  <div id="app" v-else>
    <el-container style="height:100%;">
      <el-header style="padding: 0; height: 50px;">
        <top-header></top-header>
      </el-header>
      <el-container style="height: calc(100% - 50px);">
        <el-aside width="110px" style="background:#298bf5;" class="hidden-xs-only">
          <side-bar></side-bar>
        </el-aside>
        <div class="app-wrap">
          <!-- 此处放置el-tabs代码 -->
          <el-tabs
            v-if="allTabs.length > 0"
            v-model="activeTab"
            type="border-card"
            closable
            @tab-click='tabClick'
            @tab-remove='tabRemove'
          >
            <el-tab-pane
              :key="item.name"
              v-for="(item, index) in allTabs"
              :label="item.extra"
              :name="item.path"
            >

            </el-tab-pane>
          </el-tabs>
          <div class="cont-container">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    import 'element-ui/lib/theme-chalk/index.css'
    import './styles/main.css'
    import Sidebar from '@/components/common/Sidebar.vue'
    import Header from '@/components/common/Header.vue'

    const MAP_PATH = '/map';

    export default {
        name: 'App',
        components: {
            'side-bar': Sidebar,
            'top-header': Header
        },
        data() {
            return {
                allTabs: [],
                activeTab: MAP_PATH,
                routePath: '/',
                hideTab: true
            }
        },
        created() {
            this.routePath = this.$route.path
            this.addTab(MAP_PATH)

            this.$router.beforeEach((to, from, next) => {
                if (to.path === '/map') {
                    if (from.path === '/supervise' || from.path === '/produce' || from.path === '/ensure') {
                        this.tabRemove(from.path, false)
                    }
                } else if (to.path === '/supervise' || to.path === '/produce' || to.path === '/ensure') {
                    if (from.path === '/supervise' || from.path === '/produce' || from.path === '/ensure') {
                        this.tabRemove(from.path, false)
                    }
                }

                next()
            })
        },
        mounted() {
            // this.addTab('/map')
            if (this.$route.path !== MAP_PATH) {
                this.addTab(this.$route.path)
            }
        },
        methods: {
            addTab(path) {
                let route = this.$router.options.routes.find(r => r.path === path)
                if (route && route.path !== '/' && route.path !== '/login') {
                    // let tabExist = !!this.allTabs.find(t => t.path === route.path)
                    let tabExist = !!this.allTabs.find(t => route.path.startsWith(t.path))
                    if (!tabExist) {
                        this.allTabs.push(route)
                    }
                    this.activeTab = path
                }
            },
            tabClick(tab) {
                this.$router.push({path: this.activeTab});
            },
            //移除tab标签
            tabRemove(tabName, pushView = true) {
                // 海图不删
                if (tabName === '/map') {
                    return
                }

                let tabIndex = 0;
                for (let i = 0; i < this.allTabs.length; i++) {
                    if (this.allTabs[i].path === tabName) {
                        this.allTabs.splice(i, 1)
                        tabIndex = i
                        break
                    }
                }

                if (this.activeTab === tabName && pushView) {
                    if (tabIndex >= this.allTabs.length) {
                        tabIndex = this.allTabs.length - 1
                    }
                    this.currentTab = this.allTabs[tabIndex]
                    this.$router.push({path: this.allTabs[tabIndex].path})
                }
            }
        },
        watch: {
            '$route'(toRoute, fromRoute) {
                this.addTab(toRoute.path)
                this.routePath = this.$route.path
                this.hideTab = (this.routePath === '/login' || this.routePath === '/forgot-pwd' || this.routePath === 'change-pwd')
            }
        }
    }
</script>

<style>
  /*@import "./styles/main.css";*/
  @import "./styles/color-dark.css";

</style>

<style lang="scss">
  .app-wrap {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: calc(100% - 110px);
    .el-tabs__content {
      flex: 1;
    }
  }

  .cont-container {
    flex: 1;
    display: flex;
    overflow-y: auto;
  }
  .el-loading-mask {
    z-index: 9999!important;
  }

  a {
    cursor:pointer;
  }
</style>
